<template>
	<view class="reservation">
		<u-navbar :is-back="false" :border-bottom="false" title="店铺详情" title-color="#181818" @leftClick="leftClick">
			<view class="page_navbar_warp" slot="right">
				<image src="/static/icon/ewm.png" mode="" class="img-44" @click="ewmShow = true"></image>
			</view>
		</u-navbar>
		<image :src="info.head_img" mode="" class="banner"></image>
		<view class="header">
			<view class="top df-aic-jusb">
				<view class="fsz-32 fw-b u-line-1 name">{{info.name}}</view>
				<view class="df-aic-jucen status" :class="{'ac':info.business_status == 1}">
					<text class="fsz-24 color-f" v-if="info.business_status == 1">营业中</text>
					<text class="fsz-24 color-f" v-else>休息中</text>
				</view>
			</view>
			<view class="center df-aic-jusb">
				<view class="">
					<view class="addr u-line-3 fsz-24 mb-20">{{ info.full_address }}</view>
					<view class="fsz-28 color-9">{{ info.contact }}</view>
				</view>
				<view class="df-aic">
					<view class="u-text-center" @click="mapShow = true">
						<image src="https://cos.runyukang.cn/static/new/18.png" mode="" class="img-56 mb-10"></image>
						<view class="fsz-24">导航</view>
					</view>
					<view class="u-text-center ml-30" @click="$callPhone(info.contact)">
						<image src="https://cos.runyukang.cn/static/new/19.png" mode="" class="img-56 mb-10"></image>
						<view class="fsz-24">电话</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="zhanshi">
			<view class="fsz-28 fw-b mb-20 pl-30">店铺展示</view>
			<scroll-view class="scroll-view_H mb-20" scroll-x="true">
				<view class="scroll-item" v-if="info.video" @click="videoShow = true">
					<image :src="info.video+'?ci-process=snapshot&time=1'" mode="" class="img1"></image>
					<image src="https://cos.runyukang.cn/static/new/26.png" mode="" class="play"></image>
				</view>
				<view class="scroll-item" v-for="(item,index) in info.images" :key="index" @click="lookImg(info.images)">
					<image :src="item" mode="" class="img1"></image>
				</view>
				
			</scroll-view>
		</view>
		

		
		<view class="detail">
			<view class="title fsz-28 fw-b">店铺介绍</view>
			<view class="html" v-html="info.intro"></view>
		</view>
		
		
		<!-- 地图选择组件 -->
		<MapSelector 
			:visible.sync="mapShow" 
			:title="info.name" 
			:latitude="info.latitude" 
			:longitude="info.longitude"
			:address="info.name">
		</MapSelector>
		
		<u-popup :show="videoShow" mode="center" :mask-close-able="true" :closeable="true" close-icon-color="#fff">
			<view class="videoShow">
				<video id="myVideo" :src="videoUrl" :poster="videoUrl+''" controls></video>
			</view>
		</u-popup>
		
		<storeEwm :show="ewmShow" :storeId="info.id" :type="2" @changeCloseEwm="ewmShow = false"></storeEwm>
		
	</view>
</template>

<script>
	import MapSelector from '@/components/mapSelector/mapSelector.vue';
	import storeEwm from '@/components/storeEwm/storeEwm.vue'
	
	export default {
		components: {
			MapSelector,
			storeEwm
		},
		data() {
			return {
				id:'',
				latitude:'',
				longitude:'',
				mapShow:false,
				info:{},// 店铺详情
				videoUrl:'',
				videoShow:false,
				ewmShow:false,
			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id;
			this.latitude = option.latitude;
			this.longitude = option.longitude;
			
			uni.request({
			    url: 'https://api.runyukang.cn/api/unstore/info?id=1&latitude=32.144983&longitude=115.019963', 
			    // data: {
			    //     id:this.id,
			    //     latitude:this.latitude,
			    //     longitude:this.longitude,
			    // },
			    header: {
			        'custom-header': 'hello' //自定义请求头信息
			    },
			    success: (res) => {
					res = res.data
			        console.log(res.data.info);
					this.info = res.data.info
					this.info.images = JSON.parse(res.data.info.images)
					this.videoUrl = res.data.info.video
			        // if(res.code == 200){
			        // 	this.info = res.data.info
			        // 	this.info.images = JSON.parse(res.data.info.images)
			        // 	this.videoUrl = res.data.info.video
			        // }
			    }
			});
			
			
			// this.$http.get('/api/unstore/info',{
			// 	id:this.id,
			// 	latitude:this.latitude,
			// 	longitude:this.longitude,
			// }).then(res=>{
			// 	if(res.code == 200){
			// 		this.info = res.data.info
			// 		this.info.images = JSON.parse(res.data.info.images)
			// 		this.videoUrl = res.data.info.video
			// 	}
			// })

		},
		methods:{
			leftClick() {
				uni.navigateBack();
			},
			lookImg(urls){
				uni.previewImage({
					urls: urls,
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.reservation{
		.img-14{width: 14rpx;height: 14rpx;}
		.img-16{width: 16rpx;height: 16rpx;}
		.img-56{width: 56rpx;height: 56rpx;}
		.img-44{width: 44rpx;height: 44rpx;}
		::v-deep.u-navbar__content__title {
			line-height: 2;
			font-size: 34rpx;
			font-weight: bold;
		}
		.videoShow{
			width: 750rpx;
			video{
				width: 750rpx;
			}
		}
		.banner{
			position: absolute;left: 0;top: 88rpx;z-index: 1;
			display: block;
			width: 750rpx;
			height: 524rpx;
		}
		.header{
			position: relative;z-index: 2;
			width: 690rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 0 30rpx 0 30rpx;
			margin: 500rpx auto 30rpx;
			.top{
				height: 100rpx;
				border-bottom: 1px solid #EDEDED;
				.name{
					width: 400rpx;
				}
				.status{
					margin-top: 16rpx;
					width: 130rpx;
					height: 40rpx;
					border-radius: 12rpx;
					background: #999;
				}
				.ac{
					background: #32BE67;
				}
			}
			.center{
				padding-top: 30rpx;
				border-bottom: 1px solid #EDEDED;
				padding-bottom: 20rpx;
				.addr{
					width: 400rpx;
					line-height: 1.5;
				}
			}

		}
		.detail{
			width: 690rpx;
			margin: auto;
			border-radius: 20rpx;
			background: #fff;
			padding: 0 30rpx;
			.title{
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #EDEDED;
			}
			.html{
				text-align: justify;
				padding: 30rpx 0;
				font-size: 26rpx;
				line-height: 1.5;
			}
		}
		.zhanshi{
			width: 690rpx;
			height: 260rpx;
			border-radius: 20rpx;
			background: #fff;
			padding-top: 30rpx;
			margin: 30rpx auto;
			.scroll-view_H {
				white-space: nowrap;
				.scroll-item {
					display: inline-block;
					width: 200rpx;
					height: 140rpx;
					margin-left: 30rpx;
					border-radius: 20rpx;
					position: relative;
					z-index: 2;
					.img1{
						width: 200rpx;
						height: 140rpx;
						border-radius: 20rpx;
						position: absolute;
						left: 0;
						top: 0;
						z-index: -1;
					}
					.play{
						position: absolute;
						z-index: 1;
						left: 50%;
						top: 50%;
						width: 48rpx;
						height: 48rpx;
						margin-left: -24rpx;
						margin-top: -24rpx;
					}
				}
				.scroll-item:last-child{
					margin-right: 30rpx;
				}
			}
		}
		.page_navbar_warp {
			margin-right: 160rpx;
		}
		
	}
</style>